<template>
  <div class="article">
    <h3>Article组件</h3>
    <p>计算得到人的姓名：{{ fullName }}</p>
    <p>Count的值是：{{ count }}</p>
    <button @click="count++">count+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: 'zhang',
      ming: 'san',
      count: 0,
      dog: {
        name: '小黑',
        age: 3
      }
    }
  },
  // 侦听器 watch
  watch: {
    // count() {
    //   console.log('你修改了count的值')
    // }
    // 如果需要其他配置，则需要写成对象格式
    count: {
      handler() {
        console.log('你又修改了 count 的值~~~~')
      },
      immediate: true // 页面刷新后，马上侦听一次
    },
    // 侦听dog对象中age的变化
    // 'dog.age'() {
    //   console.log('修改了小狗的年龄')
    // }

    dog: {
      handler() {
        console.log('你修改了Dog对象（修改了name或age）')
      },
      deep: true // 加入deep，才可以侦听对象的变化
    }
  },
  // 计算属性 computed
  computed: {
    fullName() {
      return this.xing + this.ming
    }
  }
}
</script>

<style lang="less" scoped>
.article {
  background-color: lightgreen;
  padding: 10px;
}
</style>
